<template>
    <div id="login" :style="`height:${height}`">
        <div class="login_div">
            <span style="margin:30px;line-height:40px">登录</span>
            <div style="border-top: 1px solid #e2e2e2">

                <div style="margin-top:40px">
                    <van-form @submit="onSubmit">
                     <van-field
                       v-model="userName"
                       name="userName"
                        center
                        clearable
                        label="账号："
                        placeholder="请输入手机号"
                        :border=true
                        :rules="[{ required: true, message: '请填写用户名' }]"
                    />
                    <div style="height:20px"></div>
                     <van-field
                        v-model="password"
                        name="password"
                        type="password"
                        center
                        clearable
                        label="密码："
                        placeholder="请输入密码"
                        :border=true
                        :rules="[{ required: true, message: '请填写密码' }]"
                    />
                     </van-form>
                </div>
                <div style="line-height: 100px;margin: 0 10px;">
                 <van-button size="large"  type="info" @click="onSubmit">登录</van-button>
                </div>
            </div>
        </div>
        <div  class="regist">
            <span>
                <span>您还没有账号信息？</span> 
                <router-link :to="{path:'/regist'}" >
                立即注册
                </router-link>
                </span>
        </div>
    </div>
</template>
<script>
import {login,getUserInfo} from '../../../request/mobile/mine/request_mine'
export default {
    data(){
        return{
            height:'',
            userName:'',
            password:''
        }
    },
    methods:{
        getHeight(){
            this.height = window.innerHeight+"px";
        },
        onSubmit(){
            var password = window.btoa(this.password);
            console.log(this.userName,password)
           login({userPhone:this.userName,password:password}).then(res=>{
               if(res.code==200){
                  localStorage.setItem("petToken",res.data)
                   //根据id去查询用户信息
                   getUserInfo(res.data).then(res=>{
                       if(res.code==200){
                           //查询成功
                           let userName = res.data.userName;
                           let userId  = res.data.userId;
                           localStorage.setItem("userPhone",this.userName);
                           localStorage.setItem("userName",userName);
                           localStorage.setItem("userId",userId)
                           localStorage.setItem("userImage",res.data.userImage)
                           this.$router.push("/home")
                       }else{
                           this.$Toast(res.msg)
                       }
                   })
                    
               }else{
                   this.$Toast(res.msg)
               }
           })
        }
    },
    created(){
        this.getHeight()
    }
}
</script>

<style scoped>
    #login{
        background-image: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586189495627&di=127375f7bbdc72132ec0e8aa58be776b&imgtype=0&src=http%3A%2F%2Fwww.ps-xxw.cn%2Fuploadfile%2F201208%2F25%2F3221510613.jpg');
        padding-top: 35%;
        background-size:100% 100%;
    }
    .login_div{
        height: 300px;
    background:rgba(255, 255, 255);
    border: 1px;
    /* position: absolute; */
      margin: 0 40px 0 40px;
    /* right: 20px; */
   
    border-radius: 10px;
    border-style: ridge;
    }
    .regist{
        height: 37px;
        margin: 0 60px;
        background-color: rgba(255, 255, 255, 0.7);
        text-align: center;
        line-height: 34px;
        border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    }
</style>